<template>
	<view class="vip-master-view">
		<!-- <view class="custom-title">领VIP攻略</view> -->
		<view class="start"></view>
		<view class="clip-me"></view>
		<view class="slogan">
			<view class="s-o">ORAW</view>
			<view class="s-vip">VIP GUIOE</view>
		</view>
		<view class="vip-component">
			<!-- <view class="top-nav" style="display: none;">
				<van-icon name="arrow-left" color="#081A2A" size="18" class="nav-back-icon" @click="goback"/>
				<view class="title" style="display: none;">领VIP攻略</view>
			</view> -->
			<view class="main">
				<view class="reward-rule">
					<view class="rewrad-img"></view>
					<view class="rewrad-title">每邀请一位家长注册、绑定、充值您将获得以下奖励:</view>
				</view>
				<RegisterRule title="注册规则" :reward="reg.rewardDay" :cost="`${reg.cost ? '≈' +reg.cost : ''}`" category="注册"/>
				<RegisterRule title="绑定奖励" :reward="bid.rewardDay" :cost="`${bid.cost ? '≈'+bid.cost : ''}`"  category="绑定" />
				<BindTable :data="jl" />
			</view>
		</view>
		<view class="flooter">
			<view class="basic-btn btn-jc" @click="jumpPage">我的奖池</view>
			<button v-if="doShare" open-type="share" class="clear-normal-style basic-btn btn-share">
				<image src="/static/images/vip/share.png" class="share-icon" />
				点击分享
			</button>
			<view v-else class="clear-normal-style basic-btn btn-share btn-notloged" @click="dontShare" >
				<image src="/static/images/vip/share.png" class="share-icon" />
				点击分享
			</view>
		</view>
		
	</view>
	<!-- <GlobalWebsocketNotice v-if="visibleGlobalNotice" /> -->
</template>

<script>
	import { computed, ref } from 'vue'
	import RegisterRule from "@/components/table/index.vue"
	import BindTable from "@/components/bindTable/index.vue"
	import GlobalWebsocketNotice from '@/components/globalWebsocketNotice/index.vue'
	import { homeServer, vipServer } from "@/common/index"
	import {onShow, onHide} from "@dcloudio/uni-app"
	import { useBound } from "@/hooks/useBound.ts"
	import { useNotLogged } from "@/hooks/useNotLogged.ts"
	import { global, mock } from "@/utils/index.ts"
	const {tipBoundStudent, studentIsEmpt} = useBound();
	const { isNotLogged, tipToLogin } = useNotLogged()
	
	
		
	export default {
		components:{
			RegisterRule,
			BindTable,
			GlobalWebsocketNotice,
		},
		data(){
			return {
				doShare: mock.isLogged(), // true： 点击分享按钮可以分享 false: 不可以分享弹出提示登录
				visibleGlobalNotice: false,
				shareCodeInfo: {},
				// rewardMessageData: [] ,// 奖励详细信息
				reg: {}, // 注册
				bid: {}, // 绑定
				jl: [] // 奖励
			}
		},
		onShow(options) {   // 页面被展示时执行
			this.visibleGlobalNotice = true
		},
		onLoad: function ({shareCode} ) {
			const path = `/pages/login/index?shareCode=${shareCode}`;
			if(shareCode){
				uni.reLaunch({
					url: path
				})
			}
		},
		mounted() {
			this.visibleGlobalNotice = true
			this.rewardMessage()
			this.queryShareCode()
			uni.showShareMenu({
				withShareTicket:false, 
				menus:["shareAppMessage"] //  shareTimeline: 分享到朋友圈shareAppMessage： 发送给朋友
			})
		},
		onUnload() { //  页面即将被关闭时执行
			this.visibleGlobalNotice = false
		},
		methods: {
			// rewardType 奖励类型 0:首次分享 1:邀请注册 2:邀请绑定 3:邀请充值一个月 4:邀请充值半年 5:邀请充值一年
			rewardMessage: async function(){
				try{
					const { status, data } = await  vipServer.rewardMessage()
					if(status === '200'){
						// this.rewardMessageData = data
						this.reg = data[0]
						this.bid = data[1]
						this.jl = data.filter((item, i) => i > 1)
						if(mock.isLogged()){
							this.doShare = true
						}
						// if(data?.length === 0){
						// 	if(!mock.isLogged()){
								
						// 	}
						// }
					}
				}catch(e){
					console.log(e)
				}
			},
			//  获取sharecode
			queryShareCode: async function(){
				try{
					const {data, status} = await homeServer.remainMoneyAndSharecode()
					console.log('获取分项码', data, status)
					if(status === '200'){
						this.shareCodeInfo = data
					}
				}catch(e){
					console.log(e)
					//TODO handle the exception
				}
			},
			dontShare: function(){
				if(!mock.isLogged()){
					 tipToLogin()
					 return;
				} 
			},
			jumpPage: function(){
				// if(studentIsEmpt.value){
				// 	tipBoundStudent();
				// 	return;
				// }
				if(!mock.isLogged()){
					 tipToLogin()
					 return;
				} 
				uni.navigateTo({
					url:"/pagesD/jackpot/index"
				})
			}
		},
		onShareAppMessage(res) {
			const shareCode = this.shareCodeInfo.sharecode
			if(res.from === 'button'){
				return {
					title:`孩子手机防沉迷就用---管手机`,
					imageUrl:"/static/images/global-notice/publicize.png",
					path:`/pages/tabbar/vip/index?shareCode=${shareCode}`
				}
			}
			return {
				title:`孩子手机防沉迷就用---管手机`,
				imageUrl:"/static/images/global-notice/publicize.png",
				path:`/pages/tabbar/dynamic/index?shareCode=${shareCode}`
			}
		},
		
		
		
	}
</script>
<style>
	page{
		background-color: #eff8fd;
	}
</style>
<style lang="scss" scoped>
	.top-nav{
		width: 100%;
		height: 60upx;
		padding-top: 100upx;
		text-align: center;
		position: fixed;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		line-height: 60upx;
		// background-color: #ccc;
		.nav-back-icon{
			position: absolute;
			left: 20upx;
			z-index: 2;
			visibility: hidden;
		}
		.title{
			color: #081A2A;
			font-weight: 600;
			font-size: 36upx;
			position: absolute;
			left: 0;
			right: 0;
			margin: 0 auto;
		}
	}
</style>
<style lang="scss">
	.vip-master-view {
	  background-size: cover;
	  background-position: center;
	  min-width: 100vw;
	  min-height: 100vh;
	  position: relative;
	  // display: flex;
	  // justify-content: center;
	  // align-items: center;
	  .start{
		position: absolute;
		z-index: 1;
		top: 120upx;
		right: 0;
		width: 78px;
		height: 103px;
		background-image: url('/static/images/vip/blur_start.png'); 
	  }
	  .clip-me{
		  width: 600upx;
		  height: 600upx;
		  right: 0;
		  top: 0;
		  background-color: #e9fbfc;
		  backdrop-filter: blur(5upx);
		  box-shadow: 2upx 5upx 5upx rgba(179, 241, 215, 0.1);
			z-index: -1;
		   position: absolute; /* absolute or fixed positioning required */
		   // clip: rect(110px, 160px, 170px, 60px); /* or "auto" */
		clip-path: polygon(16% 38%, 10% 23%, 35% 6%, 70% 2%, 100% 0, 100% 15%, 100% 85%, 100% 100%, 85% 100%, 0 100%, 21% 68%, 25% 51%);
	  }
	  .slogan{
		position: absolute;
		z-index: 1;
		top: 200upx;
		right: 20upx;
		  color: #e9fbfc;
		    font-size: 60upx;
			display: flex;
			flex-direction: column;
			 color: transparent; /* 文字本身透明 */
			  // -webkit-text-stroke: 2px #fff; /* 黑色描边，描边宽度为2px */
		  .s-o{
			
		  }
		  .s-vip{
		  }
	  }
	  
	}
</style>
<style lang="scss">
	.vip-component{
		position: absolute;
		background-color: red;
		min-width: 100vw;
		min-height: 100vh;
		  background: rgba(255, 255, 255, 0.3); /* 半透明的白色背景 */
		  // border-radius: 15px;
		  // padding: 20px;
		  text-align: center;
		  backdrop-filter: blur(10px); /* 应用模糊效果 */
		  -webkit-backdrop-filter: blur(10px); /* 兼容 Webkit 内核的浏览器 */
		  // box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
		  
		  .main{
			  position: absolute;
			  top: 150upx;
			  padding: 0  20upx 200upx 20upx;
			  width: calc(100% - 40upx);
			  
			  .reward-rule{
				  .rewrad-img{
					  width:112px;
					  height: 47px;
					  background: url("/static/images/vip/rule_title.png") top left no-repeat;
					  background-size: cover;
				  }
				  .rewrad-title{
					  margin-top: 24upx;
					  font-weight: 600;
					  font-size: 28upx;
					  color: #081A2A;
					  text-align: left;
					  font-style: normal;
					  text-transform: none;
				  }
			  }
			  
			 
		  }
		
	}
</style>

<style scoped lang="scss">
	 .flooter{
		 position: fixed;
		 bottom: 20upx;
		 left: 0;
		 right: 0;
		 margin: auto;
		 display: flex;
		 justify-content: center;
		 align-items: center;
		 // margin: 88upx auto 48upx auto;
			.basic-btn{
				width: 344upx;
				height: 112upx;
				line-height: 112upx;
				text-align: center;
				border-radius: 80upx;
				font-size: 32upx;
				font-weight: 600;
			}
			.btn-jc{
				margin-left: 30upx;
				color: #fff;
				background: #2BC888;
			}
			.btn-share{
				display: flex;
				align-items: center;
				justify-content: center;
				color: #181818;
				list-style: none;
				background: linear-gradient( 180deg, #F2FFFA 0%, #C3FFE7 100%);
				border: 1upx solid #2BC888;
			}
			.btn-notloged{
				margin-left: 30upx;
			}
			.clear-normal-style {
				// background: none; /* 去除背景颜色 */  
				// border: none; /* 去除边框 */  
				padding: 0; /* 去除内边距 */  
				// font: inherit; /* 继承父元素的字体样式 */  
				color: inherit; /* 继承父元素的颜色 */  
				cursor: pointer; /* 鼠标悬停时显示指针 */  
				outline: none; /* 去除点击时的焦点框 */  
			}
			  
			/* 去除button在IE中的默认focus样式 */  
			button:focus {  
			    outline: none;  
			}
			.share-icon{
				width:36upx;
				height: 36upx;
				margin-right: 10upx;
			}
		}
</style>


<style scoped lang="scss">
	.custom-title{
		// background: rgba(255, 255, 255, 0.3);
		width: 100%;
		height: 165upx;
		position: fixed;
		z-index: 10;
		display: flex;
		// align-items: center;
		line-height: 200upx;
		justify-content: center;
		color: #081A2A;
		font-weight: 600;
		font-size: 36upx;
	}
</style>